메뉴부분 설정하기 2편

demun
티스토리스킨수정/메인메뉴
2010. 11. 14. 14:31

이전에 메뉴부분을 살펴보고 대략 수정하는 법을 알아봤습니다.

하지만 완전하게 수정하려면 html 까지 모두 수정을 해야만 합니다.

왜냐면 티스토리 치환자에서 공지사항을 지원하지 않기 때문이죠.

그래서 하나의 박스부분을 두개로 나누어서 하나는 공지사항이, 또 하나는 블로그메뉴가 들어가게 설정을 합니다.

메뉴부분에 대한 글은 1편을 봐야만 2편을 이해할수 있습니다. 연장선에 있는 글이기 때문입니다.

즉 아래의 코드처럼 html 을 수정했습니다.

<div id="menuWrap">
	<div id="menu_notice">
		<a href="[#\#_blog_link_##]notice" title="공지" class="m_notice png">Notice</a>
	</div>
	<div id="blogMenu">[#\#_blog_menu_##]</div>
</div>

즉 공지사항이 들어가는 부분(menu_notice)와 블로그메뉴 부분(blogMenu) 부분 두개가 menuWrap 안에 존재하게 됩니다.

왜 그렇게 했냐면 해더부분중에서 좌측에 타이틀이 존재하고 우측에 메뉴부분이 존재합니다.

우측에 메뉴부분을 공지사항과 메뉴부분 두개로 나누어서 사용해야 하기 때문입니다.

이건 깊게 생각하지 않아도 됩니다.

그냥 하나의 div 안에 공지사항과 블로그 메뉴부분 이렇게 두개가 있다고 생각하면 됩니다.

이 부분에 대한 css 코드는 아래와 같습니다.

#menu_notice{
	float: left;
	height:35px;
	width:125px;
}
#menu_notice a{
	font: 13px/18px verdana, sans-serif;
	background: url('./images/button.png') no-repeat;
	height:35px;
	width:125px;
}
#menu_notice a.m_notice{
	float: left;
	color: #fff;
	background-position:-8px -5px;
	padding:10px 0 0 40px; 
	width:85px;
}
#menu_notice a.m_notice:hover{
	text-decoration:none;
	background-position:-8px -56px;
}
body#tt-body-notice #menu_notice a.m_notice{
	background-position:-8px -105px;
}

menuWrap 박스안에 menu_notice 를 왼쪽으로 설정하는것이 첫번째 줄입니다.

자 1편에서 블로그 메뉴를 설정하는 html 과 css 부분을 설정했구요.

2편에서는 공지사항을 나오도록 설정했습니다.

이제 관리자와 글쓰기 부분을 나오도록 설정해보겠습니다.